import React, { useEffect, useState, useRef } from 'react'
import "../pl/pl.css"
import axios from "axios"
import { LeftOutline, EnvironmentOutline, EditSOutline, LikeOutline } from 'antd-mobile-icons'
import { Popup } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import Keyboard from 'react-simple-keyboard';
import 'react-simple-keyboard/build/css/index.css';
import layout from 'simple-keyboard-layouts/build/layouts/chinese';
export default function Pl() {
    const [input, setInput] = useState('');
    const [layoutName, setLayoutName] = useState('');
    const [language, setLanguage] = useState('chinese');
    const [keyboardOpen, setKeyboardOpen] = useState(false);
    const keyboard = useRef();
    const [list, setList] = useState([])
    const [travel, setTravel] = useState([])
    const [visible1, setVisible1] = useState(false)//键盘的显示与隐藏
    const [visible2, setVisible2] = useState(false)
    const [showCloseIcon, setShowCloseIcon] = useState(false)
    const [pllist, setPllist] = useState([])
    const id = useParams().id
    const navigate = useNavigate()
    const getList = () => {
        axios.get("http://127.0.0.1:3000/dyx_index/forlist").then(res => {
            if (res.data.code == 200) {
                setList(res.data.data)
            }
        })
    }
    //
    const getTravel = () => {
        axios.get("http://127.0.0.1:3000/dyx_index/dyx_travel").then(res => {
            if (res.data.code == 200) {
                setTravel(res.data.data)
            }
        })
    }
    //获取评论信息
    const getPl = () => {
        axios.get("http://127.0.0.1:3000/dyx_index/dyx_pl_list").then(res => {
            if (res.data.code == 200) {
                setPllist(res.data.data)
            }
        })
    }
    //添加评论
    const addPl = () => {
        axios.post(`http://127.0.0.1:3000/dyx_index/dyx_addpl`, input).then(res => {
            if (res.data.code == 200) {
                setList(res.data.data)
            }
        })
    }
    // 键盘变更
    const onChange = (input) => {
        setInput(input);
    };
    const onKeyPress = (button) => {
        if (button === '{shift}' || button === '{lock}') handleShift();
        if (button === '{shift}') {
            const newLanguages = language === 'english' ? 'chinese' : 'english';
            setLanguage(newLanguages);
        }
        if (button === '{enter}') {
            setInput('');
            keyboard?.current?.clearInput();
            setTimeout(() => {
                keyboard?.current?.candidateBox.destroy();
            }, 100);
        }
    };
    const handleShift = () => {
        const newLayoutName = layoutName === 'default' ? 'shift' : 'default';
        setLayoutName(newLayoutName);
    };
    const handleChange = (e) => {
        const input = e.target.value;
        setInput(input);
        keyboard.current.setInput(input);
    };

    //关闭抽屉
    const onClose = () => {
        setKeyboardOpen(false);
    };
    const keyboardRender = (event) => {
        event.input.default = input;
    };


    useEffect(() => {
        getList()
        getTravel()
        getPl()
    }, [])
    return (
        <div>
            {
                list.filter(i => i._id == id).map(item => {
                    return <div>
                        <div className='yl-box'>
                            <LeftOutline style={{ width: "1.8rem", marginLeft: "-1.8rem", height: "2rem", marginTop: "2.7rem" }} onClick={() => {
                                navigate("/Foot/Shou")
                            }} />
                            <div style={{ marginTop: "1rem", display: "flex", justifyContent: "space-between" }}>
                                <img src={item.img} style={{ width: "3.5rem", height: "3.5rem", borderRadius: "2rem", position: "absolute", top: "2rem" }}></img>
                                <span style={{ fontSize: "1.5rem", marginTop: "2rem", marginLeft: "4rem" }}><b>{item.name}</b></span>
                            </div>
                            <p style={{ marginTop: "3rem", borderColor: "grey" }}>发私信</p>

                        </div>
                        <div className='yl-main'>
                            <img src={item.picture} style={{ width: "100%", height: "55rem" }}></img>
                            <div className='yl-box1'>
                                <p style={{
                                    width: "6rem", height: "2rem", background: "rgb(241,241,241)",
                                    borderRadius: "1rem", textAlign: "right", lineHeight: "2rem"
                                }}><EnvironmentOutline style={{ padding: "0rem 1rem 0rem 0rem" }} />{item.address}</p>
                                <h2 style={{ marginTop: "1rem" }}>{item.title}</h2>
                                <p style={{ fontSize: "1.8rem", marginTop: "1rem" }}>{item.content}</p>
                                <p style={{ color: "grey", marginTop: "1rem" }}>{item.date}发布</p>
                                <p style={{ color: "grey", marginTop: "1rem" }}>来自{item.address}</p>
                            </div>
                        </div>
                    </div>

                })
            }
            <div>
                {
                    travel.map(item => {
                        return <div className='see'>
                            <div className='box'>
                                <div><img src={item.img}></img></div>
                                <div className='yl-box2'>
                                    <p style={{ fontWeight: "bold", fontSize: "1.6rem" }}>{item.name}</p>
                                    <p>{item.level}</p>
                                    <p style={{ color: "blue", fontSize: "1.5rem" }}>{item.score}分</p>
                                    <p>{item.address}</p>
                                </div>
                                <div>
                                    <button>去看看</button>
                                </div>
                            </div>

                        </div>
                    })
                }
            </div>
            <div style={{ height: "50rem" }}></div>

            <div className='yl-bottom'>
                <EditSOutline style={{ position: "absolute", left: '1.9rem', top: "1.5rem" }} />
                <input placeholder='写评论...' onFocus={() => {
                    setVisible1(true)
                }}></input>

                <div className='tu'>
                    <div>
                        <img src="/点赞.png"></img>
                        <p>20</p>
                    </div>
                    <div>
                        <img src="/评论.png" onClick={() => {
                            setVisible2(true)
                        }}></img>
                        <p>10</p>
                    </div>
                    <div>
                        <img src="/分享.png"></img>
                        <p>分享</p>
                    </div>
                    <div>
                        <img src="/收藏.png"></img>
                        <p>收藏</p>
                    </div>
                </div>
            </div>
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
                bodyStyle={{ height: '40vh' }}
            >
                <div style={{ display: "flex" }}>
                    <input placeholder='说点什么吧...' style={{ width: "30rem", height: "8rem", borderRadius: "1rem", background: "rgb(241,241,241)", border: "none", marginLeft: "1rem" }}
                        value={input} onChange={(e) => {
                            setInput(e.target.value)
                        }} onFocus={() => {
                            setVisible1(true)
                        }}></input>
                    <span style={{ color: "blue", marginTop: "6rem" }} onClick={() => {

                    }}>发送</span>
                </div>
                <Keyboard
                    keyboardRef={(r) => (keyboard.current = r)}
                    layoutName={layoutName}
                    onChange={onChange}
                    onKeyPress={onKeyPress}
                    layout={layout.layout}
                    onRender={keyboardRender}
                    layoutCandidates={
                        language === 'english' ? {} : layout.layoutCandidates
                    }
                    display={{
                        '{bksp}': 'baskspace',
                        '{enter}': '清除',
                        '{shift}': '中/英',
                        '{s}': 'shift',
                        '{tab}': 'tab',
                        '{lock}': '大/小写',
                        '{accept}': 'Submit',
                        '{space}': 'Space',
                    }}
                    preventMouseDownDefault={true}
                />
            </Popup>
            <Popup
                visible={visible2}
                onMaskClick={() => {
                    setVisible2(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                    minHeight: '80vh',
                }}
                showCloseButton
                onClose={() => {
                    setVisible2(false)
                }}
            >
                <div>
                    <h2 style={{ textAlign: "center" }}>全部评论({pllist.length})</h2>
                    <div className='yl-bigbox'>
                        {
                            pllist.map((item, index) => {
                                return <div className='box' key={index}>
                                    <div><img src={item.img} style={{ width: "5rem", height: "5rem", borderRadius: "2.5rem" }}></img></div>
                                    <div>
                                        <p>{item.name}</p>
                                        <p>{item.date}</p>
                                        <p>来自{item.address}</p>
                                        <p>{item.desc}</p>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                    <input placeholder='说点什么吧...'
                        onClick={() => {
                            setVisible1(true)
                            setVisible2(false)
                        }}
                        style={{ width: "40rem", height: "4rem", borderRadius: "1.5rem", border: "none", marginBottom: '0px', background: "rgb(241,241,241)", position: "absolute", bottom: "1rem", left: "2rem" }}></input>
                </div>
            </Popup>




            {/* <div className='main'>
                 
                <div className='see'>
                    <div className='box'>
                        <div><img src="/gu.png"></img></div>
                        <div>
                            <h3>故宫博物馆</h3>
                            <p>5A</p>
                            <p style={{ color: "blue" }}>4.8分</p>
                            <p>北京市</p>
                        </div>
                        <div>
                            <button>去看看</button>
                        </div>
                    </div>
                </div>
                <div className='ping'>
                    <p>评论</p>
                    <div className='box'>
                        <div><img src="/gu.png"></img></div>
                        <div>
                            <p>五星</p>
                            <p>5A</p>
                            <p>11111111111111111111</p>
                          
                        </div>
                    </div>
                    <div className='box'>
                        <div><img src="/gu.png"></img></div>
                        <div>
                            <p>五星</p>
                            <p>5A</p>
                            <p>22222222222</p>
                    
                        </div>
                    </div>
                </div>
                <div style={{ height: "20rem" }}></div>

            </div> */}


        </div>
    )
}
